<template>
  <div>
    <el-col :span="24">
      <el-card style="height: 350px;">
        <div :id="'History'+id" style="height: 300px;"></div>
      </el-card>
    </el-col>
  </div>
</template>

<script>
  import {getNodesByBrowsePath,  queryHistoryRawValueByUri} from "../../api/faultWarning";
  /*import {setEchartsHeight} from "../../utils/chartStyle";*/
    export default {
      name: "HistoryChart",
      data() {
        return {
        }
      },
      props: ['id', 'uri', 'token','paramName','startTimeSelect','endTimeSelect'],
      mounted() {
        this.start();
        /*window.addEventListener("resize", () => {
          if (this.myChart) {
            // 计算echarts高度
            setEchartsHeight('History-outer', 'HistoryChart' + this.id, 50)
            this.myChart.resize();
          }
        });
        setEchartsHeight('History-outer', 'HistoryChart' + this.id, 50)
        this.myChart.resize();*/
      },
      beforeDestroy() {
        console.log("clearInterval");
        clearInterval(this.interval);
      },
      methods: {
        start() {
          this.firstFlag = true
          let param = {
            "depth": 2,
            "forward": true,
            "id": this.uri.split("/")[2]
          };
          getNodesByBrowsePath(this.token, param).then((res) => {
            if (res) {
              let nodes = res.data.result[0].children;
              let nodesDict = {};
              for (let item of nodes) {
                nodesDict[item.name] = item;
              }
              let children = nodesDict["关键参数"].children;
              let realUri;
              for (let i = 0; i < children.length; i++) {
                let child = children[i];
                if (this.paramName.indexOf(child.name) !== -1) {
                  this.realUri = child.uri;
                  console.log(child);
                  break;
                }
              }
              this.predict();
            }
          });
        },
        queryHistory(realUri) {
          let param = {
            "nodes": [
              {
                "browsePath": realUri
              }
            ],
            "detail": {
              "maxSizePerNode": 500,
              "returnBounds": false,
              "startTime": this.startTimeSelect,
              "endTime": this.endTimeSelect
            }
          };
          return queryHistoryRawValueByUri(param);
        },
        predict() {
          if (this.firstFlag) {
            this.firstFlag = false;
            this.queryHistory(this.realUri).then(res => {
              let data;
              try {
                data = res.data.result[0].historyData;
              } catch (e) {
                console.log(e)
                console.log(res.data)
                this.firstFlag = true;
                return;
              }
              this.drawChart(data);
            })
          }
        },
        drawChart(data) {
          const chartDom = document.getElementById('History' + this.id);
          this.myChart = this.$echarts.init(chartDom);

          this.realData = data.map(item => [item.t, item.v.toFixed(2)])

          this.option = {
            tooltip: {
              trigger: 'axis'
            },
            xAxis: {
              type: "time",
              splitNumber: 3
            },
            yAxis: {scale: true},
            toolbox: {
              right: 10,
              feature: {
                dataZoom: {
                  yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
              }
            },
            dataZoom: [{
              startValue:this.startTimeSelect
            }, {
              type: 'inside'
            }],
            series: [{
              name: '真实值',
              data: this.realData,
              type: 'line',
              smooth: true,
              itemStyle: {
                /*normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#50eee8'
                  }, {
                    offset: 1,
                    color: '#9be1e3'
                  }])
                }*/
                color: '#3ea548'
              },
              lineStyle: {
                width: 2,
              },
              areaStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#91ffc7'
                }, {
                  offset: 1,
                  color: 'rgba(204,204,204,0)'
                }])
              }
            }]
          };

          this.myChart.setOption(this.option);
        },
      }
    }

</script>

<style scoped>

</style>
